<template>
    <div>
        <div style="display: flex;  justify-content: center; ">
            <div style="width: 100%; display: flex; flex-direction: column; gap: 1em;">
                <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8 }"
                    style="width: 100%;  margin-top: 40px;" v-model="comment.content" placeholder="留下足迹吧~">
                </el-input>
                <div
                    style="display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 1em; align-items: center;">
                    <el-input v-model="name" placeholder="昵称" prefix-icon="el-icon-user"></el-input>
                    <el-input v-model="email" placeholder="邮件(选填)"></el-input>
                    <span style="display: flex; align-items: center;margin-left: auto; ">
                        <el-button circle=""  @click.self="emoji = !emoji">
                            <i class="el-icon-user" @click.self="emoji = !emoji"></i>
                        </el-button>
                        <el-button type="primary" style="width: 70px;" @click="subComment">提交
                        </el-button>

                    </span>
                </div>
                <div style="position: relative;">
                    <picker
                        style=" position: absolute; overflow: visible !important; top: 0em;right: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0.5em 1em;border-radius: 0.875em;overflow: hidden;animation: 0.3s ease 0s 1 normal both running fadeInUp;"
                        :showSearch="false" :showPreview="false" @select="addEmoji" v-show="emoji" />
                </div>


            </div>
        </div>
    </div>
</template>

<script>
import { Picker } from "emoji-mart-vue"; //引入组件


export default {
    props:{
        commentId:Number,
        activeIndex:Number
    },
    components: {
        Picker
    },

    data(){
        return{
            name:'',
            email:'',
            emoji:false,
            comment:{
                content:''
            },
            novel:this.$route.query.novel?JSON.parse(this.$route.query.novel):null,
            user:{}
        }
    },
    created(){
        this.load()
    },
    methods:{
        addEmoji(e){
            this.comment.content+=e.native
        },
        load(){
            if(this.novel!=null){
            this.$request.get('/comment',{params: {
            novelId: this.novel.id
          }}).then(res=>{
                this.commentList=res.data
            })
        }
    },
        subComment(){
                this.user=JSON.parse(localStorage.getItem('user' || '{}'))
                if(this.novel!=null){
                this.comment.novelId=this.novel.id
                this.comment.userName=this.name
                this.comment.image=''
                }else{
                    this.comment.name=this.name
                }
                if(this.user!=null){
                    if(this.novel!=null){
                    this.comment.img = this.user.image
                    this.comment.userId = this.user.id
                    this.comment.userName = this.user.name
                    }
                    else{
                        this.comment.image=this.user.image
                        this.comment.name=this.user.name
                    }
                }
                else{
                    this.comment.image=''
                }
                if(this.commentId!=null){
                    this.comment.parentId=this.commentId
            }
            if (this.novel!= null) {
                this.$request.post("comment/add", this.comment).then(res => {
                    console.log(this.novel)
                    if (res.code == '1') {
                        this.$message.success("发送成功")
                        this.$emit('load');
                    }
                    else
                        this.$message.error(res.msg);

                })
            }
            else {
                this.$request.post("message/add", this.comment).then(res => {
                    console.log("2")
                    if (res.code == '1') {
                        this.$message.success("发送成功")
                        this.$emit('load');
                    }
                    else
                        this.$message.error(res.msg);

                })
            }
        },
    }
}
</script>

<style>
/*deep*/ .emoji.emoji-mart[data-v-7bc71df8]{
    overflow: visible;
}
</style>